/*
 * @Author: lanbin
 * @Date: 2020-02-16 18:01:50
 * @Last Modified by: lanbin
 * @Last Modified time: 2020-11-12 10:20:49
 */

const path = require('path');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  devServer: {
    port: 8082,
  },
  productionSourceMap: !isProduction,
  // 'resize-detector', 'vue-charts'
  transpileDependencies: [
    'dom7',
    'ssr-window',
    'swiper',
    'mutong-ketang-login',
    'mutong-ketang-service',
    'mutong-ketang-searchlist',
    'mutong-ketang-select',
    'vue-router-tab',
  ],
  configureWebpack: (config) => {
    if (isProduction) {
      // 开启gzip压缩
      config.plugins.push(
        new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: /\.js$|\.html$|\.json$|\.css/,
          threshold: 10240,
          minRatio: 0.8,
        }),
      );

      // 解决vendor过大
      config.optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `vendor.${packageName.replace('@', '')}`;
              },
            },
          },
        },
      };
    } else {
      config.devtool = 'source-map';
    }

    config.plugins = [...config.plugins, new LodashModuleReplacementPlugin()];
  },

  /**
   * 覆盖webpack config
   */
  chainWebpack: (config) => {
    config.resolve.extensions
      .merge(['.js', '.vue', '.json', '.less'])
      .end()
      .alias.set('@', resolve('src'))
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('views', resolve('src/views'))
      .set('mixins', resolve('src/mixins'))
      .set('layout', resolve('src/layout'))
      .set('utils', resolve('src/utils'))
      .set('comp', resolve('src/components'))
      .set('assets', resolve('src/assets'))
      .set('config', resolve('src/config'))
      .set('plugins', resolve('src/plugins'));

    config.plugins.delete('preload');
    config.plugins.delete('prefetch');
    config.module.rule('eslint').delete('enforce');

    // 增加一个图片的配置
    config.module
      .rule('images')
      .use('url-loader')
      .options({
        limit: 10000,
        name: 'img/[name].[hash:8].[ext]',
      });

    config.module
      .rule('less')
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use(['vue-style-loader', 'css-loader', 'less-loader'])
      .loader('style-resources-loader')
      .options({
        patterns: [path.resolve(__dirname, './src/assets/style/vars.less')],
      });
  },
};
